<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="lib/react.js"></script>
		<script src="lib/react-dom.js"></script>
		<script src="lib/browser.js"></script>
		<script src="jquery.js"></script>
		<style>
			.divv{
				width:400px;
				height:auto;
				display:flex;
				flex-wrap:wrap;
				border:1px solid #000;
				background:url("./1.png") center no-repeat;
				background-size:50%;
			}
			.verydiv{
				width:22%;
				height:30px;
				text-align:center;
				line-height:30px;
				border:1px solid #87CEEB;
				margin:5px;
				font-size:13px;
				color:red;
			}
			.divvv{
				margin-left:80px;
				margin-top:20px;
			}
			.hehe{
				background:skyblue
			}
		</style>
	</head>
	<body>
		 <div id="root"></div>
	</body>
	<script type="text/babel">
		
		 class App extends React.Component {
		 	 
		 	   constructor(props){
		 	   	     super(props)
		 	   	     this.state={
		 	   	     	arr:["谢忠宁","郭振男","倪聪","李佳豪","刘瑞","张艳强","张明凯","柳旭","王迪",
		 	   	     	      "张志阳","李梦雪","申柯","王晓冬","张金龙","尹彪彪","范俊丹","向博","李杰",
		 	   	     	      "赵勃斌","朱曾光","屈蛟秀","吕艳琴","鲁明文","弓嗣荣","朱恬恬"],
		 	   	     	timer:null,
		 	   	     	stop:false,
		 	   	     	list:[],
		 	   	     	Xypeople:[]
		 	   	     }
		 	   }
		 	
		 	   add(){
		 	   	 
		 	   	  var addid = this.refs.addusername.value
		 	   	  
		 	   	  this.state.arr.push(addid)
		 	   	  
		 	   	  this.setState({
		 	   	  	 arr:this.state.arr
		 	   	  })
		 	   	 
		 	   }
		 	
		 	   removeid(index){
		 	   	
		 	   	  this.state.arr.splice(index,1)
		 	   	  
		 	   	  this.setState({
		 	   	  	  arr:this.state.arr
		 	   	  })
		 	   	
		 	   	  var vid = document.querySelectorAll(".verydiv")
		 	   	  $(vid).removeClass("hehe")
		 	   	
		 	   }
		 	   
		 	   kaijiang(){
		 	   	
		 	   	  if(!this.state.stop){
		 	   	  	
		 	   	  	  this.setState({
		 	   	  	  	 stop:true
		 	   	  	  })
		 	   	  	
		 	   	  	  var length = this.state.arr.length;
		 	   	  	  
		 	   	  	  var timer = setInterval( ()=>{
		 	   	  	  	
		 	   	  	  	  var index = Math.floor(Math.random()*length)
		 	   	  	  	  var gen = this.state.arr[index]
		 	   	  	  	  
		 	   	  	  	  this.state.list.push(gen)
		 	   	  	  	  
		 	   	  	  	  this.setState({
		 	   	  	  	  	list:this.state.list
		 	   	  	  	  })
		 	   	  	  	  
		 	   	  	  	  var vid = document.querySelectorAll(".verydiv")
		 	   	  	  	  $(vid[index]).addClass("hehe").siblings().removeClass("hehe")
		 	   	  	  	  
		 	   	  	  },100)
		 	   	  	
		 	   	  	   this.setState({
		 	   	  	   	  timer:timer
		 	   	  	   })
		 	   	  	
		 	   	  }else{
		 	   	  	
		 	   	  	 this.setState({
		 	   	  	 	stop:false
		 	   	  	 })
                     
                     clearInterval(this.state.timer)
                     
                     var ook = this.state.list
                     var ookk = ook[ook.length-1]
                     this.state.Xypeople.push(ookk)
                     this.setState({
                     	Xypeople:this.state.Xypeople
                     })
                     
		 	   	  }
		 	   	
		 	   }
		 	   
		 	   render(){
		 	   	  return(
		 	   	  	 <div>
		 	   	  	       <div className="divv">
		 	   	  	              {this.state.arr.map( (i,index)=>{
		 	   	  	              	    return <div key={index} className="verydiv">
		 	   	  	              	                      <span>{i}</span>
		 	   	  	              	                      <span style={{marginLeft:"7px"}} onClick={this.removeid.bind(this,index)}>x</span>
		 	   	  	              	              </div>
		 	   	  	              })}
		 	   	  	       </div>
		 	   	  	       <div className="divvv">
		 	   	  	       		 	<input ref="addusername" />
		 	   	  	                <button onClick={this.add.bind(this)}>添加小伙伴</button>
		 	   	  	       </div>
		 	   	  	       <button onClick={this.kaijiang.bind(this)}>哪位小可爱获奖哩</button>
		 	   	  	       <p>中奖人员名单 :</p>
		 	   	  	       <div>
		 	   	  	            {this.state.Xypeople.map( (i)=>{
		 	   	  	            	 return <p key={i}>{i}</p>
		 	   	  	            })}
		 	   	  	       </div>
		 	   	  	 </div>
		 	   	  )
		 	   }
		 	
		 }
		
		 ReactDOM.render(
		 	<App/>,
		 	document.getElementById("root")
		 )
		
	</script>
</html>
